import React, { FC, useRef, useState } from 'react'
import { Button, Drawer, message } from 'antd'
import ProTable, { ProColumns } from '@ant-design/pro-table'
import { getFunctionArgList, deleteFunctionArg, addFunctionArg } from '@/services/functionArg'
import Tag from 'antd/es/tag'
import { PlusOutlined } from '@ant-design/icons'
import CrateArg from '@pages/ControllerView/components/FunctionConfig/CrateArg'
import ArgValidConfig from '@pages/ControllerView/components/FunctionConfig/ArgValidConfig'

interface FunReqArgProps {
  visible:boolean,
  onClose:any,
  funId:string,
  projectId:string,
}

const FunReqArg: FC<FunReqArgProps> = (props) => {

  const ref = useRef<any>()

  const { visible, onClose, funId, projectId } = props
  const [crateVis, setCrateVis] = useState<boolean>(false)

  const [argCifVis,setArgCigVis] = useState<boolean>(false);
  const [arg,setArg] = useState<any>({});

  const columns: ProColumns<any>[] = [
    {
      title: '名称',
      dataIndex: 'name',
      hideInSearch: true,
      formItemProps: {
        rules: [
          {
            required: true,
            message: '此项为必填项'
          }
        ]
      }
    },
    {
      title: '类型名称',
      dataIndex: 'arg_type_name',
      hideInSearch: true,
      formItemProps: {
        rules: [
          {
            required: true,
            message: '此项为必填项'
          }
        ]
      }
    },
    {
      title: '介绍',
      dataIndex: 'comment',
      hideInSearch: true
    },
    {
      title: '验证',
      dataIndex: 'valid',
      hideInSearch: true,
      hideInForm: false,
      render: (text: any, record) => {
        const data = eval(record.valid) || []
        return (
          <span>
           {data.map((val: any) => <Tag>{val}</Tag>)}
            <Tag onClick={() => showValid(record)} style={{ borderStyle: 'dashed' }}>
          <PlusOutlined/>
          </Tag>
         </span>
        )

      }
    },
    {
      title: '操作',
      valueType: 'option',
      width: 100,
      render: (text, record) => {
        if (record.id) {
          return <Button size='small' danger type='primary' onClick={() => deleteRow(record)}>删除</Button>
        }
        return <Button size='small' type='primary' onClick={() => addRow(record)}>启用</Button>
      }
    }
  ]

  const addRow = (data: any) => {
    delete data.file_id
    delete data.file_type
    if (!data.comment) delete data.comment;
    addFunctionArg(data).then(res => {
      if (res.code === 10000) {
        message.success('启用成功！')
        ref.current.reload()
      }
    })
  }

  const deleteRow = (record: any) => {
    deleteFunctionArg(record).then(res => {
      if (res.code === 10000) {
        message.success('删除成功！')
        ref.current.reload()
      }
    })
  }

  const setArgConfig = (flag:boolean,fun:string) => {
    setArgCigVis(flag)
    if (fun === 'update') {
      ref.current.reload()
    }
  }

  const showValid = (data: any) => {
    if (!data.id) {
      message.warning('请先启用！')
      return
    }
    setArg(data);
    setArgConfig(true,'add');
  }

  const crateArg = (flag: boolean) => {
    setCrateVis(flag)
  }

  const argSubmit = (val:any) => {
    val.fun_id = funId;
    addFunctionArg(val).then(res => {
      if (res.code === 10000) {
        message.success('参数添加成功！')
        setCrateVis(false);
        ref.current.reload();
      }
    })
  }


  return (
    <>
      <Drawer
        title="请求参数"
        width={1000}
        onClose={() => onClose(false)}
        visible={visible}
        bodyStyle={{ paddingBottom: 80, backgroundColor: '#f0f2f5' }}
        footer={
          <div style={{
            textAlign: 'right'
          }}>
            <Button onClick={() => onClose(false)} key="submit" type="primary">
              确定
            </Button>
          </div>
        }>
        <ProTable
          actionRef={ref}
          rowKey="id"
          columns={columns}
          pagination={false}
          request={async () => getFunctionArgList({ fun_id: funId })}
          headerTitle="请求参数列表"
          search={false}
          options={{ search: false }}
          toolBarRender={() => [
            <Button key="button" onClick={() => crateArg(true)} icon={<PlusOutlined/>} type="primary">
              新建
            </Button>
          ]}
        />
      </Drawer>
      {/* 添加参数 */}
      <CrateArg onSubmit={argSubmit} projectId={projectId} onClose={crateArg} visible={crateVis}/>
      {/* 参数验证 */}
      <ArgValidConfig argId={arg.id} argValid={eval(arg.valid) || []} onClose={setArgConfig} visible={argCifVis} />
    </>
  )
}

export default FunReqArg
